import React from 'react'
// BrowserRouter 使用 H5 提供的history API来保持 UI 和 URL 的同步
// Switch 用于渲染与路径匹配的第一个子 <Route> 或 <Redirect>
import { BrowserRouter as Router, Switch, Route, NavLink } from "react-router-dom"
import Count from '../pages/count'
import Todo from '../pages/todo'
import Apple from '../pages/apple'

const AppRouter = (props) => {
  return (
    <Router>
      <div id="nav">
        <NavLink exact to="/">Count</NavLink>
        <NavLink to="/todo">Todo</NavLink>
        <NavLink to="/apple">Apple</NavLink>
      </div>
      <Switch>
        <Route exact path="/">
          <Count />
        </Route>
        <Route path="/todo">
          <Todo />
        </Route>
        <Route path="/apple">
          <Apple />
        </Route>
      </Switch>
    </Router>
  )
}

export default AppRouter